<!-- 这是一个聊天列表Item项 -->

<template>
  <div class="message-item" :class="{'message-item--right': isRight}">
    <div class="message-item__avatar">
      <img :src="isRight ? bascGeekUrl + userProfile  : bascBossUrl + userProfile " alt="avatar" v-if="signType === 'geek'"/>
      <img :src="isRight ? bascBossUrl + userProfile : bascGeekUrl + userProfile  " alt="avatar" v-else/>
      <div class="message-item__name" :class="{'message-item-name-right': isRight}">{{ messageItem.username }}</div>
    </div>
    <div class="message-item__text" :class="{'message-item-text-right': !isRight}"><p>{{ messageItem.message }}</p></div>
  </div>
</template>

<script setup lang="ts">
import { useBossStore } from '@/store/modules/boss.ts';
import { defineProps } from 'vue';
const bossStore = useBossStore();
const { boss } = bossStore;
const bascBossUrl = ref('http://localhost:8080/api/images/companyLogo/')
const bascGeekUrl = ref('http://localhost:8080/api/images/userProfile/')
const props = defineProps({
  messageItem: {
    type: Object,
    required: true,
  },
  username: {
    type: String,
    required: true,
  },
  signType: {
    type: String,
    required: true,
  },
});
const isRight = ref(props.messageItem.username === props.username);
const userProfile = computed(()=>{
  return  props.messageItem.userProfile
})
const touserProfile = computed(()=>{
  return props.messageItem.touserProfile
})
</script>

<style scoped>

.message-item {
  display: flex;
  align-items: start;
  margin-bottom: 32px;
  padding: 6px 12px;
  border-radius: 10px;
  /* background-color: #fff; */
  height: auto;
}

.message-item--right {
  flex-direction: row-reverse;
}

.message-item__avatar {
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.message-item__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}



.message-item__name {
  font-size: var(--font-16);
  font-weight: bold;
  margin-bottom: 5px;
  color: #7f8ea0;
}

.message-item-name-right {
  text-align: right;
}

.message-item__text {
  font-size: var(--font-16);
  padding: 6px 12px;
  color: #fff;
  max-width:20em;
  background-color: #268bef;
  border-radius: 10px 0 10px 10px;
  margin-right: 10px;
  /* 文字换行 */
  word-wrap: break-word;
  word-break: break-all;
  text-align: end;
  margin-top: 5%;
  text-align: start;
}

.message-item-text-right{
  border-radius: 0px 10px 10px 10px;
  margin-right: 0;
  background-color: #dde4eb;
  color: rgb(29, 29, 29);
}

</style>